<template>
  <el-card shadow="always" class="classBox">
    <!-- 表单控件 -->
    <el-row type="flex" justify="space-between">
      <el-col>
        <el-form :inline="true" class="demo-form-inline" :model="formData">
          <el-form-item>
            <el-input v-model="formData.class_name" placeholder="班级名称" clearable @clear="clearFn" />
          </el-form-item>
          <el-form-item>
            <el-select v-model="formData.subject_id" placeholder="归属学科" clearable @clear="clearFn">
              <el-option v-for="item in subjectInfo" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item><el-form-item>
            <el-select v-model="formData.state" placeholder="显示状态" clearable @clear="clearFn">
              <el-option v-for="item in showState" :key="item.id" :label="item.value" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button plain type="primary" size="small" @click="search">搜索</el-button>
            <el-button size="small" @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="4">
        <el-row type="flex" justify="end">
          <el-button plain type="primary" @click="addClass">创建班级</el-button>
        </el-row>
      </el-col>
    </el-row>
    <!-- 表格数据 -->
    <el-table
      empty-text="暂无数据"
      border
      style="width: 100%"
      :data="classInfo"
    >
      <el-table-column
        type="expand"
        label="#"
        width="50"
        align="center"
      >
        <template slot-scope="{ row }">
          <el-form label-position="left" inline class="demo-table-expand" label-width="130px" size="mini">
            <el-row type="flex">
              <el-col :span="6">
                <el-form-item label="班级名称">
                  <span>{{ row.class_name }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="归属学科">
                  <span>{{ row.subject_name }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item label="创建人">
                  <span>{{ row.username }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="开始结束日期">
                  {{ row.start_time | formatDate }} 至 {{ row.end_time | formatDate }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item label="创建日期">
                  <span>{{ row.created_at }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="讲师">
                  <el-tag v-for="(item,index) in JSON.parse(row.teacher_info)" :key="index" style="margin-right: 8px"> {{ item.username }}</el-tag>
                </el-form-item>
                <span v-if="JSON.parse(row.teacher_info).length === 0">没有关联老师</span>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item label="助教">
                  <el-tag v-for="(item,index) in JSON.parse(row.zhujiao_info)" :key="index" type="success" style="margin-right: 8px"> {{ item.username }}</el-tag>
                  <span v-if="JSON.parse(row.zhujiao_info).length === 0">没有关联助教</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="班主任">
                  <el-tag v-for="(item,index) in JSON.parse(row.manager_info)" :key="index" style="margin-right: 8px" type="warning">{{ item.username }}</el-tag>
                  <span v-if="JSON.parse(row.manager_info).length === 0">没有关联班主任</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        type="index"
        label="序号"
        width="60"
        align="center"
      />
      <el-table-column
        prop="id"
        label="班级ID"
        width="70"
        align="center"
      />
      <el-table-column
        prop="class_name"
        label="班级名称"
        width="170"
        align="center"
      />
      <el-table-column
        prop="subject_name"
        label="归属学科"
        width="150"
        align="center"
      />
      <el-table-column
        label="讲师"
        width="160"
        align="center"
      >
        <template slot-scope="{ row }">
          <el-tag v-for="(item,index) in JSON.parse(row.teacher_info)" :key="index" style="margin-right: 8px"> {{ item.username }}</el-tag>
          <span v-if="JSON.parse(row.teacher_info).length === 0">没有关联老师</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="zhujiao_info"
        label="助教"
        width="160"
        align="center"
      >
        <template slot-scope="{ row }">
          <el-tag v-for="(item,index) in JSON.parse(row.zhujiao_info)" :key="index" type="success" style="margin-right: 8px"> {{ item.username }}</el-tag>
          <span v-if="JSON.parse(row.zhujiao_info).length === 0">没有关联助教</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="manager_info"
        label="班主任"
        width="160"
        align="center"
      >
        <template slot-scope="{ row }">
          <el-tag v-for="(item,index) in JSON.parse(row.manager_info)" :key="index" style="margin-right: 8px" type="warning">{{ item.username }}</el-tag>
          <span v-if="JSON.parse(row.manager_info).length === 0">没有关联班主任</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="username"
        label="创建人"
        width="120"
        align="center"
      />
      <el-table-column
        label="是否显示"
        width="120"
        align="center"
      >
        <template slot-scope="{ row }">
          <el-switch
            :value="row.state* 1 === 1? true : false"
            active-text="是"
            inactive-text="否"
            @change="changeFn(row)"
          />
        </template>
      </el-table-column>
      <el-table-column
        prop="end_time"
        label="开始结束日期"
        width="200"
        align="center"
      >
        <template slot-scope="{ row }">
          {{ row.start_time | formatDate }} 至 {{ row.end_time | formatDate }}
        </template>
      </el-table-column>
      <el-table-column
        prop="created_at"
        label="创建日期"
        width="160"
        align="center"
      >
        <template slot-scope="{ row }">
          {{ row.created_at }}
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="210"
        align="center"
      >
        <template slot-scope="{ row }">
          <el-button type="primary" icon="el-icon-edit" circle @click="editClass(row)" />
          <el-button type="danger" icon="el-icon-delete" circle @click="delClass(row)" />
        </template>
      </el-table-column>
    </el-table>
    <el-row type="flex" justify="center" align="middle" style="height: 60px; margin-top: 30px">
      <span>共{{ page.total }}条</span>
      <el-pagination
        background
        :page-sizes="[10,20,30,40]"
        :current-page="page.page"
        :page-size="page.limit"
        :total="page.total"
        layout="sizes,prev, pager, next, total, jumper"
        @current-change="pageChange"
        @size-change="sizeChange"
      />
    </el-row>
    <class-node ref="classNode" :class-info="classInfo" />
  </el-card>
</template>
<script>
import { getClassInfo, delClass, editGetClass, editState } from '@/api/class'
// import { tranListToTreeData } from '@/utils'
import ClassNode from './components/ClassNode.vue'
import { mapGetters } from 'vuex'
export default {
  name: 'Class',
  components: {
    ClassNode
  },
  props: {},
  data() {
    return {
      classInfo: [], // 班级列表信息
      page: {
        total: 0, // 总条数
        page: 1,
        limit: 10
      },
      formData: {}, // 搜索框表单数据
      showState: [
        { value: '显示', id: 1 },
        { value: '隐藏', id: 2 }
      ]
    }
  },
  computed: {
    ...mapGetters(['subjectInfo'])

  },
  watch: {},
  created() {
    this.getClassInfo()
    this.search()
    this.$store.dispatch('class/getSubjectInfo')
    console.log(this.subjectInfo)
  },

  mounted() { },
  methods: {
    // 获取班级列表
    async getClassInfo() {
      const { data } = await getClassInfo(this.page)
      this.page.total = data.total
      this.classInfo = data.list
    },
    // 条数切换事件
    sizeChange(newSize) {
      this.page.limit = newSize
      this.getClassInfo()
    },
    // 页码切换
    pageChange(newPage) {
      this.page.page = newPage
      this.getClassInfo()
    },
    // 重置表单
    resetForm() {
      this.formData = {}
      this.search()
    },
    // 搜索班级信息
    async search() {
      const { data } = await getClassInfo({
        ...this.page, ...this.formData
      })
      this.page.total = data.total
      this.classInfo = data.list
    },
    // 创建班级
    addClass() {
      this.$refs.classNode.showDialog = true
      this.$refs.classNode.state = true
      this.$refs.classNode.getManagerList(this.classInfo)
      this.$refs.classNode.getTeacherList(this.classInfo)
      this.$refs.classNode.getZhujiaoList(this.classInfo)
    },
    // 删除班级
    async delClass(row) {
      await this.$confirm('确认删除该班级吗?')
      await delClass(row.id)
      this.$message.success('删除成功')
      if (this.page.page !== 1 && this.classInfo.length === 1) {
        this.page.page--
      }
      this.search()
    },
    // 编辑班级
    async editClass(row) {
      const { data } = await editGetClass(row.id)
      this.$refs.classNode.dateArr = [data.start_time, data.end_time]
      console.log(data)
      this.$refs.classNode.formData = { ...data, manager_info: JSON.parse(data.manager_info), teacher_info: JSON.parse(data.teacher_info), zhujiao_info: JSON.parse(data.zhujiao_info) }
      this.$refs.classNode.showDialog = true

      this.$refs.classNode.getManagerList(this.classInfo)
      this.$refs.classNode.getTeacherList(this.classInfo)
      this.$refs.classNode.getZhujiaoList(this.classInfo)
    },
    // 点击clearable触发的事件
    clearFn() {
      this.search()
    },
    async changeFn(row) {
      await editState({
        id: row.id,
        state: row.state * 1 === 1 ? 2 : 1
      })
      this.$message.success('切换状态成功')
      this.getClassInfo()
    }
  }
}
</script>
<style  lang='scss' scoped>
.classBox {
  margin: 20px;
  background-color: #fff;
}
</style>
